<template> 
<!-- 在template里面写HTML代码，构建页面外观 -->
    <div class="align-center">
        <h2 >{{msg}}</h2>
        <input type="text" v-model="num1"  @change="add()"><label for="">+</label><input type="text" v-model="num2"  @change="add()"><label for="">=</label><label for="">{{result}}</label>
    </div>
</template>

<script>
// 在script中写js代码，用于编写页面数据变量和操作方法
export default {
    // 页面中的所有变量定义在这里
    data(){
        return{
            msg:'welcome ！',
            num1:0,
            num2:0,
            result:0
        }
    },
    //  页面中用到的方法定义在这里
    methods:{
        add(){
            this.result =parseInt(this.num1)  + parseInt(this.num2) ;
        }
    }
}
</script>

<style scoped>
/* 关于页面外观的css代码写在这里 */
.align-center {
  text-align: center;
}
</style>